<template>
	<div class="releDyna">
		<div class="releDyna_top">
			<div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">发布动态<i class="el-icon-close"></i></div>
		</div>
		<div class="releDyna_title">
			<div class="releDyna_title_left">动态管理/<i>发布动态</i></div>
			<div class="releDyna_title_right">
			</div>
		</div>
		<div class="releDyna_content">
			<div class="releDyna_content_Up">
				<div class="form_top">编辑动态</div>
				<form>
					<div class="form_theme">
						<div class="form_theme_left">动态主题</div>
						<div class="form_theme_right">
							<input type="text" v-model="form.theme" placeholder="请输入主题" @blur="blurInput">
							<div class="text-ipt" v-if="hiddTheme">主题不能为空</div>
						</div>
					</div>
					<div class="form_image">
						<div class="form_image_left">图片</div>
						<div class="form_image_right">
							<img :src="images" alt=""/>
							<input class="file_image" type="file" accept="image/png, image/jpeg, image/gif, image/jpg" title=" " @change="handerFile">
							<div class="file_box">
								<div class="file_add"><i class="el-icon-plus"></i></div>
								<div class="file_text">上传照片</div>
							</div>
							<!-- <el-upload
								action="https://jsonplaceholder.typicode.com/posts/"
								list-type="picture-card"
								:on-preview="handlePictureCardPreview"
								:on-remove="handleRemove">
								<i class="el-icon-plus"></i>
							</el-upload> -->
						</div>
					</div>
					<div class="form_content">
						<div class="form_content_left">内容</div>
						<div class="form_content_right">
							<textarea type="text" v-model="form.content" placeholder="请输入地标简介，不超过2000字" @blur="blurCont"></textarea>
							<div class="text-ipt" v-if="hiddCont">内容不能为空</div>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div>
			<el-button >保存并发布</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				hiddTheme:false,			// 主题为空时显示
				images:'',
				hiddCont:false,				// 内容为空时
				form:{
					theme:'qss',				// 主题
					image:'',				// 图片
					content:'',				// 内容
				}
			}
		},
		methods: {
			blurInput() {
				if(this.form.theme == '') {
					this.hiddTheme = true;
				}else {
					this.hiddTheme = false;
				}
			},
			blurCont() {
				if(this.form.content == '') {
					this.hiddCont = true;
				}else {
					this.hiddCont = false;
				}
			},
			handerFile(e) {
				console.log(e);
				let file = e.target.files[0];
				let reader = new FileReader();
				reader.readAsDataURL(file);
				reader.onload = (v) => {
					console.log(v);
					this.images = v.target.result;
					console.log(this)
					console.log(this.images);
				}
			},
		},
	}
</script>

<style lang="less" scoped="scoped">
	@import 'releDyna.less';
</style>
